<template>
  <div>我是about页面{{ routeInfo }}
    <button @click="jump">跳转</button>
    <div class="swiper"></div>
    <SlotView>
      <h1>我是about页面一个插槽内容</h1>
    </SlotView>
    {{ cartList }}
  </div>
</template>

<script>
import product from "./mixin/product.js"
import SlotView from './SlotView.vue'
export default {
  components: { SlotView },
  mixins: [product],

  props: {},
  data () {
    return {
      routeInfo: []
    }
  },
  computed: {},
  methods: {
    getClassList () {

    },
    jump () {
      // this.$router.replace({ path: '/info' })
      this.cartList[0].price = 299
    }
  },
  created () {
    this.routeInfo = this.$route.query
    // 存到本地存储
    console.log("我是about", this.$route)
  },
  mounted () {

  },
  // 进入
  beforeRouteEnter (to, from, next) {
    console.log("beforeRouteEnter", to, from)
    next()
  },
  // 路由更新   /:id
  beforeRouteUpdate (to, from, next) {
    console.log("beforeRouteUpdate", to, from)
    next()
  },
  // 路由离开
  beforeRouteLeave (to, from, next) {
    console.log("beforeRouteLeave", to, from)
    next()
  }
}
</script>
<style scoped lang="less">
.swiper {
  width: 375px;
  height: 375px;
  background-color: red;

}

/* 如果公司是750设计稿   75=1rem    375px=5rem 
  我有一个设备正好屏幕宽度是750px  1rem= 75px=1font-size   75*5 =375px 站页面的50%;
  我用了一个12pro 宽度390px  页面加载js 把font-size = 39  width = 5rem 解析成195px  也正好是这个12pro的一半

  假设公司给的设计稿是640的   你的还是75为基准值转换
  那么设计稿上占用一半的是320的盒子.  320按照75转换就是 320/75 = 4.2rem  4.2rem的值

  640宽的页面   64px=font-size;    1rem = 64px     4.2rem=4.2rem*64px=268px

*/
</style>